<template>
  <div class="ai-assistant">
    <div class="assistant-header">
      <h3 class="title">
        <i class="el-icon-chat-dot-round"></i>
        AI学习助手
      </h3>
      
      <div class="model-selector">
        <el-dropdown @command="changeModel" trigger="click">
          <span class="el-dropdown-link">
            <span class="model-icon" :class="currentModel.id">
              <i :class="getModelIcon(currentModel.id)"></i>
            </span>
            {{ currentModel.name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="model in availableModels" :key="model.id" :command="model.id">
              <div class="model-item">
                <div class="model-item-header">
                  <span class="model-icon" :class="model.id">
                    <i :class="getModelIcon(model.id)"></i>
                  </span>
                  <span class="model-name">{{ model.name }}</span>
                </div>
                <div class="model-description">{{ model.description }}</div>
                <div class="model-capabilities">
                  <el-tag size="mini" v-for="(cap, idx) in model.capabilities" :key="idx" :type="getTagType(idx)">
                    {{ cap }}
                  </el-tag>
                </div>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    
    <div class="quota-info" v-if="quotaInfo" @click="showQuotaDetails">
      <el-progress 
        :percentage="quotaPercentage" 
        :color="quotaColor"
        :stroke-width="8"
        :show-text="false">
      </el-progress>
      <div class="quota-text">
        <span>AI配额: {{ quotaInfo.used }}/{{ quotaInfo.total }}</span>
        <i class="el-icon-info"></i>
      </div>
    </div>
    
    <div class="chat-container" ref="chatContainer">
      <div class="messages">
        <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
          <div class="avatar" v-if="message.type === 'assistant'">
            <i class="el-icon-s-custom"></i>
          </div>
          <div class="content">
            <div class="message-text" v-html="formatMessage(message.content)"></div>
            <div class="message-time">{{ formatTime(message.time) }}</div>
          </div>
        </div>
      </div>
      <div class="loading-indicator" v-if="isLoading">
        <i class="el-icon-loading"></i>
        <span>AI思考中...</span>
      </div>
    </div>
    
    <div class="input-container">
      <el-input
        v-model="inputMessage"
        type="textarea"
        :rows="2"
        placeholder="有任何学习问题，可以向AI助手提问..."
        @keyup.enter.native="sendMessage"
        :disabled="isLoading"
      ></el-input>
      <el-button type="primary" :disabled="!inputMessage.trim() || isLoading" @click="sendMessage">
        <i class="el-icon-s-promotion"></i>
      </el-button>
      <el-upload
        class="upload-button"
        action="#"
        :http-request="uploadFile"
        :show-file-list="false"
        :disabled="isLoading"
        accept=".pdf,.doc,.docx,.txt,.ppt,.pptx"
        :before-upload="beforeUpload">
        <el-button type="info" icon="el-icon-upload2" :disabled="isLoading"></el-button>
      </el-upload>
    </div>
    
    <div class="quick-questions">
      <h4>快速提问：</h4>
      <div class="question-tags">
        <el-tag
          v-for="(question, index) in quickQuestions"
          :key="index"
          size="small"
          @click="askQuickQuestion(question)"
          :disabled="isLoading"
        >{{ question }}</el-tag>
      </div>
    </div>
    
    <div class="action-buttons">
      <el-button size="mini" type="text" icon="el-icon-document" @click="showHistoryDialog">历史对话</el-button>
      <el-button size="mini" type="text" icon="el-icon-download" @click="saveCurrentConversation">保存对话</el-button>
      <el-button size="mini" type="text" icon="el-icon-delete" @click="clearConversation">清空对话</el-button>
    </div>
    
    <!-- 历史对话弹窗 -->
    <el-dialog
      title="历史对话"
      :visible.sync="historyDialogVisible"
      width="60%">
      <el-table
        v-loading="historyLoading"
        :data="conversationHistoryList"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="对话标题"
          width="250">
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="message_count"
          label="消息数量"
          width="100">
        </el-table-column>
        <el-table-column
          prop="model"
          label="使用模型">
          <template slot-scope="scope">
            <el-tag :class="scope.row.model" size="mini">{{ getModelNameById(scope.row.model) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="loadConversation(scope.row.id)">加载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="historyDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    
    <!-- 保存对话弹窗 -->
    <el-dialog
      title="保存对话"
      :visible.sync="saveDialogVisible"
      width="30%">
      <el-form :model="saveForm">
        <el-form-item label="对话标题" :label-width="'80px'">
          <el-input v-model="saveForm.title" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSaveConversation">确定</el-button>
      </span>
    </el-dialog>
    
    <!-- 配额详情弹窗 -->
    <el-dialog
      title="AI模型使用配额"
      :visible.sync="quotaDialogVisible"
      width="40%">
      <div v-if="quotaInfo" class="quota-details">
        <div class="quota-overview">
          <el-progress type="dashboard" :percentage="quotaPercentage" :color="quotaColor"></el-progress>
          <div class="quota-numbers">
            <div class="quota-used">
              <div class="label">已使用</div>
              <div class="value">{{ quotaInfo.used }}</div>
            </div>
            <div class="quota-total">
              <div class="label">总配额</div>
              <div class="value">{{ quotaInfo.total }}</div>
            </div>
          </div>
        </div>
        
        <div class="quota-info-list">
          <div class="info-item">
            <i class="el-icon-refresh"></i>
            <span>下次刷新时间: {{ quotaInfo.reset_date }}</span>
          </div>
          <div class="info-item">
            <i class="el-icon-warning-outline"></i>
            <span>配额用尽后，AI功能将受到限制</span>
          </div>
        </div>
        
        <div class="quota-tips">
          <h4>提示:</h4>
          <ul>
            <li>每个问题会消耗1-5点配额，取决于问题复杂度</li>
            <li>文件分析会消耗5-20点配额，取决于文件大小和类型</li>
            <li>配额每月自动刷新，也可通过完成学习任务获得额外配额</li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quotaDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAIResponse, getConversationHistory, getConversationDetail, saveConversation, uploadFileToAI, getAIQuota } from '@/api/ai'; // 导入AI API服务

export default {
  name: 'AiAssistant',
  data() {
    return {
      inputMessage: '',
      messages: [
        {
          type: 'assistant',
          content: '你好！我是你的AI学习助手，有什么可以帮助你的吗？',
          time: new Date()
        }
      ],
      quickQuestions: [
        '如何提高学习效率？',
        '推荐数学学习方法',
        '如何准备考试？',
        '学习计划制定'
      ],
      availableModels: [
        { id: 'deepseek', name: 'DeepSeek', description: '强大的通用AI模型', capabilities: ['通用对话', '学术问答', '代码生成'] },
        { id: 'ppteditor', name: 'PPT Editor', description: '专注于演示文稿创建的AI', capabilities: ['PPT设计', '内容生成', '排版优化'] },
        { id: 'kimi', name: 'Kimi', description: '对话式AI助手', capabilities: ['日常对话', '学习辅导', '知识问答'] },
        { id: 'tongyiwx', name: '通义万象', description: '阿里巴巴多模态AI模型', capabilities: ['图文理解', '多模态生成', '知识图谱'] }
      ],
      currentModel: { id: 'deepseek', name: 'DeepSeek', description: '强大的通用AI模型', capabilities: ['通用对话', '学术问答', '代码生成'] },
      isLoading: false,
      conversationHistory: [], // 存储对话历史，用于发送给API
      
      // 历史对话相关
      historyDialogVisible: false,
      historyLoading: false,
      conversationHistoryList: [],
      
      // 保存对话相关
      saveDialogVisible: false,
      saveForm: {
        title: ''
      },
      
      // 文件上传相关
      uploadingFile: false,
      allowedFileTypes: [
        'application/pdf', 
        'application/msword', 
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'text/plain',
        'application/vnd.ms-powerpoint',
        'application/vnd.openxmlformats-officedocument.presentationml.presentation'
      ],
      maxFileSize: 10 * 1024 * 1024, // 10MB
      
      // 配额相关
      quotaInfo: null,
      quotaDialogVisible: false,
    }
  },
  computed: {
    // 计算配额百分比
    quotaPercentage() {
      if (!this.quotaInfo) return 0;
      return Math.round((this.quotaInfo.used / this.quotaInfo.total) * 100);
    },
    
    // 根据配额使用情况返回颜色
    quotaColor() {
      const percentage = this.quotaPercentage;
      if (percentage < 50) return '#67c23a';
      if (percentage < 80) return '#e6a23c';
      return '#f56c6c';
    }
  },
  methods: {
    async sendMessage() {
      if (!this.inputMessage.trim() || this.isLoading) return;
      
      // 添加用户消息
      const userMessage = {
        type: 'user',
        content: this.inputMessage,
        time: new Date()
      };
      
      this.messages.push(userMessage);
      
      // 更新对话历史
      this.conversationHistory.push({
        role: 'user',
        content: this.inputMessage
      });
      
      const userQuestion = this.inputMessage;
      this.inputMessage = '';
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      // 设置加载状态
      this.isLoading = true;
      
      try {
        // 调用真实的AI API
        const response = await this.fetchAIResponse(userQuestion);
        
        // 添加AI回复
        const assistantMessage = {
          type: 'assistant',
          content: this.getModelPrefix() + response,
          time: new Date()
        };
        
        this.messages.push(assistantMessage);
        
        // 更新对话历史
        this.conversationHistory.push({
          role: 'assistant',
          content: response
        });
        
        // 更新配额信息（根据问题复杂度估算使用量）
        const usageAmount = Math.ceil(userQuestion.length / 50) || 1;
        this.updateQuotaAfterUsage(usageAmount);
        
        // 如果对话历史过长，保留最近的10条
        if (this.conversationHistory.length > 20) {
          this.conversationHistory = this.conversationHistory.slice(-20);
        }
      } catch (error) {
        // 处理错误
        this.messages.push({
          type: 'assistant',
          content: this.getModelPrefix() + '抱歉，我遇到了一些问题，请稍后再试。',
          time: new Date()
        });
        console.error('AI响应错误:', error);
      } finally {
        // 取消加载状态
        this.isLoading = false;
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }
    },
    
    async fetchAIResponse(question) {
      try {
        // 调用AI API服务
        const response = await getAIResponse({
          model: this.currentModel.id,
          messages: this.conversationHistory,
          question: question
        });
        
        // 检查响应格式并提取内容
        if (response && response.data) {
          // 对于DeepSeek模型，直接返回content字段
          if (this.currentModel.id === 'deepseek' && response.data.content) {
            console.log('DeepSeek响应:', response.data);
            return response.data.content;
          } else {
            // 其他模型的处理逻辑
            return response.data.content || '无法获取AI响应';
          }
        }
        
        return '无法获取AI响应';
      } catch (error) {
        console.error('获取AI响应失败:', error);
        throw error;
      }
    },
    
    askQuickQuestion(question) {
      if (this.isLoading) return;
      this.inputMessage = question;
      this.sendMessage();
    },
    
    async changeModel(modelId) {
      // 找到选择的模型
      const newModel = this.availableModels.find(model => model.id === modelId);
      if (!newModel || newModel.id === this.currentModel.id) return;
      
      // 更新当前模型
      this.currentModel = newModel;
      
      // 添加模型切换消息
      this.messages.push({
        type: 'assistant',
        content: `<span class="model-tag ${newModel.id}">${newModel.name}</span> 已切换到${newModel.name}模型，有什么我可以帮助你的？`,
        time: new Date()
      });
      
      // 清空对话历史，开始新的对话
      this.conversationHistory = [
        {
          role: 'system',
          content: `你现在是${newModel.name}模型，${newModel.description}。请根据你的专长回答用户问题。`
        }
      ];
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
    },
    
    // 显示历史对话弹窗
    async showHistoryDialog() {
      this.historyDialogVisible = true;
      this.historyLoading = true;
      
      try {
        // 获取历史对话列表
        const response = await getConversationHistory();
        this.conversationHistoryList = response.data.items;
      } catch (error) {
        console.error('获取历史对话失败:', error);
        this.$message.error('获取历史对话失败');
      } finally {
        this.historyLoading = false;
      }
    },
    
    // 加载特定对话
    async loadConversation(id) {
      this.historyLoading = true;
      
      try {
        // 获取对话详情
        const response = await getConversationDetail(id);
        const conversation = response.data;
        
        // 更新当前模型
        const modelId = conversation.model;
        const model = this.availableModels.find(m => m.id === modelId) || this.availableModels[0];
        this.currentModel = model;
        
        // 清空当前消息
        this.messages = [];
        
        // 加载消息
        conversation.messages.forEach(msg => {
          if (msg.role === 'user') {
            this.messages.push({
              type: 'user',
              content: msg.content,
              time: new Date(msg.time)
            });
          } else if (msg.role === 'assistant') {
            this.messages.push({
              type: 'assistant',
              content: this.getModelPrefix() + msg.content,
              time: new Date(msg.time)
            });
          }
        });
        
        // 更新对话历史
        this.conversationHistory = conversation.messages;
        
        // 关闭弹窗
        this.historyDialogVisible = false;
        
        // 提示成功
        this.$message.success('成功加载历史对话');
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      } catch (error) {
        console.error('加载对话失败:', error);
        this.$message.error('加载对话失败');
      } finally {
        this.historyLoading = false;
      }
    },
    
    // 显示保存对话弹窗
    saveCurrentConversation() {
      if (this.messages.length <= 1) {
        this.$message.warning('当前对话为空，无法保存');
        return;
      }
      
      // 生成默认标题
      const userMessages = this.messages.filter(m => m.type === 'user');
      if (userMessages.length > 0) {
        const firstQuestion = userMessages[0].content;
        this.saveForm.title = firstQuestion.length > 20 ? firstQuestion.substring(0, 20) + '...' : firstQuestion;
      } else {
        this.saveForm.title = '与' + this.currentModel.name + '的对话';
      }
      
      this.saveDialogVisible = true;
    },
    
    // 确认保存对话
    async confirmSaveConversation() {
      if (!this.saveForm.title.trim()) {
        this.$message.warning('请输入对话标题');
        return;
      }
      
      try {
        // 调用保存API
        await saveConversation({
          title: this.saveForm.title,
          model: this.currentModel.id,
          messages: this.conversationHistory
        });
        
        // 关闭弹窗
        this.saveDialogVisible = false;
        
        // 提示成功
        this.$message.success('对话保存成功');
      } catch (error) {
        console.error('保存对话失败:', error);
        this.$message.error('保存对话失败');
      }
    },
    
    // 清空当前对话
    clearConversation() {
      this.$confirm('确定要清空当前对话吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 重置消息
        this.messages = [
          {
            type: 'assistant',
            content: '你好！我是你的AI学习助手，有什么可以帮助你的吗？',
            time: new Date()
          }
        ];
        
        // 重置对话历史
        this.conversationHistory = [
          {
            role: 'system',
            content: `你现在是${this.currentModel.name}模型，${this.currentModel.description}。请根据你的专长回答用户问题。`
          },
          {
            role: 'assistant',
            content: '你好！我是你的AI学习助手，有什么可以帮助你的吗？'
          }
        ];
        
        this.$message({
          type: 'success',
          message: '对话已清空'
        });
      }).catch(() => {
        // 取消清空操作
      });
    },
    
    // 根据模型ID获取模型名称
    getModelNameById(modelId) {
      const model = this.availableModels.find(m => m.id === modelId);
      return model ? model.name : modelId;
    },
    
    getModelPrefix() {
      switch(this.currentModel.id) {
        case 'deepseek':
          return '<span class="model-tag deepseek">DeepSeek</span> ';
        case 'ppteditor':
          return '<span class="model-tag ppteditor">PPT Editor</span> ';
        case 'kimi':
          return '<span class="model-tag kimi">Kimi</span> ';
        case 'tongyiwx':
          return '<span class="model-tag tongyiwx">通义万象</span> ';
        default:
          return '';
      }
    },
    
    getModelIcon(modelId) {
      switch(modelId) {
        case 'deepseek':
          return 'el-icon-s-platform';
        case 'ppteditor':
          return 'el-icon-document';
        case 'kimi':
          return 'el-icon-chat-line-round';
        case 'tongyiwx':
          return 'el-icon-view';
        default:
          return 'el-icon-s-platform';
      }
    },
    getTagType(index) {
      const types = ['', 'success', 'warning', 'info'];
      return types[index % types.length];
    },
    formatMessage(message) {
      // 简单处理换行
      return message.replace(/\n/g, '<br>');
    },
    formatTime(time) {
      const date = new Date(time);
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    scrollToBottom() {
      const container = this.$refs.chatContainer;
      container.scrollTop = container.scrollHeight;
    },
    
    // 文件上传前的验证
    beforeUpload(file) {
      // 检查文件类型
      if (!this.allowedFileTypes.includes(file.type)) {
        this.$message.error('不支持的文件类型，请上传PDF、Word、TXT或PPT文件');
        return false;
      }
      
      // 检查文件大小
      if (file.size > this.maxFileSize) {
        this.$message.error('文件大小不能超过10MB');
        return false;
      }
      
      return true;
    },
    
    // 上传文件到AI助手
    async uploadFile(options) {
      if (this.isLoading || this.uploadingFile) return;
      
      const file = options.file;
      this.uploadingFile = true;
      
      // 添加用户消息，显示上传的文件
      this.messages.push({
        type: 'user',
        content: `<div class="file-message"><i class="el-icon-document"></i> 上传文件: ${file.name}</div>`,
        time: new Date()
      });
      
      // 更新对话历史
      this.conversationHistory.push({
        role: 'user',
        content: `[上传文件: ${file.name}]`
      });
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      // 设置加载状态
      this.isLoading = true;
      
      try {
        // 创建表单数据
        const formData = new FormData();
        formData.append('file', file);
        formData.append('model', this.currentModel.id);
        
        // 调用上传API
        const response = await uploadFileToAI(formData);
        
        // 添加AI回复
        const assistantMessage = {
          type: 'assistant',
          content: this.getModelPrefix() + response.data.content,
          time: new Date()
        };
        
        this.messages.push(assistantMessage);
        
        // 更新对话历史
        this.conversationHistory.push({
          role: 'assistant',
          content: response.data.content
        });
        
        // 更新配额信息（文件分析消耗较多）
        const usageAmount = Math.min(10 + Math.floor(file.size / (1024 * 1024)), 20);
        this.updateQuotaAfterUsage(usageAmount);
        
      } catch (error) {
        console.error('文件上传失败:', error);
        
        // 处理错误
        this.messages.push({
          type: 'assistant',
          content: this.getModelPrefix() + '抱歉，文件处理失败，请稍后再试。',
          time: new Date()
        });
      } finally {
        // 取消加载状态
        this.isLoading = false;
        this.uploadingFile = false;
        
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }
    },
    
    // 获取AI配额信息
    async fetchQuotaInfo() {
      try {
        const response = await getAIQuota();
        this.quotaInfo = response.data;
      } catch (error) {
        console.error('获取配额信息失败:', error);
      }
    },
    
    // 显示配额详情
    showQuotaDetails() {
      this.quotaDialogVisible = true;
    },
    
    // 更新配额信息（每次API调用后）
    updateQuotaAfterUsage(usageAmount = 1) {
      if (!this.quotaInfo) return;
      
      this.quotaInfo.used = Math.min(this.quotaInfo.used + usageAmount, this.quotaInfo.total);
      this.quotaInfo.remaining = this.quotaInfo.total - this.quotaInfo.used;
    },
  },
  created() {
    // 初始化对话历史
    this.conversationHistory = [
      {
        role: 'system',
        content: `你现在是${this.currentModel.name}模型，${this.currentModel.description}。请根据你的专长回答用户问题。`
      },
      {
        role: 'assistant',
        content: '你好！我是你的AI学习助手，有什么可以帮助你的吗？'
      }
    ];
    
    // 获取配额信息
    this.fetchQuotaInfo();
  }
}
</script>

<style lang="scss" scoped>
.ai-assistant {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .assistant-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .title {
      margin: 0;
      font-size: 20px;
      color: #303133;
      display: flex;
      align-items: center;
      font-weight: 600;
      
      i {
        color: #409EFF;
        margin-right: 10px;
        font-size: 24px;
      }
    }
  }
  
  .model-selector {
    display: flex;
    align-items: center;
    
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
      font-size: 14px;
      display: flex;
      align-items: center;
      
      .model-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 6px;
        
        &.deepseek {
          background: linear-gradient(135deg, #3a7bd5, #00d2ff);
        }
        
        &.ppteditor {
          background: linear-gradient(135deg, #ff7e5f, #feb47b);
        }
        
        &.kimi {
          background: linear-gradient(135deg, #11998e, #38ef7d);
        }
        
        &.tongyiwx {
          background: linear-gradient(135deg, #834d9b, #d04ed6);
        }
        
        i {
          color: #fff;
          font-size: 14px;
        }
      }
      
      i {
        margin-left: 5px;
      }
    }
    
    .el-button {
      margin-left: 8px;
    }
  }
  
  .chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    max-height: 350px;
    position: relative;
    
    .messages {
      display: flex;
      flex-direction: column;
      
      .message {
        display: flex;
        margin-bottom: 15px;
        
        &.assistant {
          .avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #409EFF, #2c6ed9);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 12px;
            box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
            
            i {
              color: #fff;
              font-size: 22px;
            }
          }
          
          .content {
            max-width: 85%;
            background-color: #ecf5ff;
            padding: 14px;
            border-radius: 0 16px 16px 16px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          }
        }
        
        &.user {
          flex-direction: row-reverse;
          
          .content {
            max-width: 85%;
            background-color: #f0f9eb;
            padding: 14px;
            border-radius: 16px 0 16px 16px;
            margin-left: auto;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
          }
        }
        
        .content {
          .message-text {
            font-size: 14px;
            line-height: 1.6;
            word-break: break-word;
          }
          
          .message-time {
            font-size: 12px;
            color: #909399;
            margin-top: 5px;
            text-align: right;
          }
        }
      }
    }
    
    .loading-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      color: #909399;
      
      i {
        margin-right: 8px;
        font-size: 16px;
      }
    }
  }
  
  .input-container {
    display: flex;
    margin-top: 10px;
    
    .el-textarea {
      margin-right: 10px;
    }
    
    .el-button {
      height: 52px;
      width: 52px;
      padding: 0;
      border-radius: 50%;
      
      i {
        font-size: 20px;
      }
    }
    
    .upload-button {
      margin-left: 10px;
      
      .el-button {
        background-color: #909399;
        border-color: #909399;
        color: #fff;
        
        &:hover, &:focus {
          background-color: #a6a9ad;
          border-color: #a6a9ad;
        }
      }
    }
  }
  
  .quick-questions {
    margin-top: 15px;
    
    h4 {
      font-size: 14px;
      margin: 0 0 8px;
      color: #606266;
    }
    
    .question-tags {
      display: flex;
      flex-wrap: wrap;
      
      .el-tag {
        margin: 0 8px 8px 0;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        &[disabled] {
          cursor: not-allowed;
          opacity: 0.6;
        }
      }
    }
  }
  
  .action-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ebeef5;
    
    .el-button {
      margin-left: 15px;
      
      &:first-child {
        margin-left: 0;
      }
    }
  }
  
  .quota-info {
    margin: 10px 0;
    padding: 5px 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      background-color: #ebeef5;
    }
    
    .quota-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 4px;
      font-size: 12px;
      color: #606266;
      
      i {
        color: #909399;
      }
    }
  }
  
  // 配额详情样式
  .quota-details {
    .quota-overview {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20px;
      
      .quota-numbers {
        display: flex;
        
        .quota-used, .quota-total {
          padding: 0 15px;
          text-align: center;
          
          .label {
            font-size: 14px;
            color: #606266;
            margin-bottom: 5px;
          }
          
          .value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
          }
          
          &.quota-used .value {
            color: #409EFF;
          }
        }
      }
    }
    
    .quota-info-list {
      margin: 15px 0;
      padding: 10px;
      background-color: #f5f7fa;
      border-radius: 4px;
      
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        i {
          color: #409EFF;
          margin-right: 8px;
        }
      }
    }
    
    .quota-tips {
      h4 {
        margin: 10px 0;
        color: #606266;
      }
      
      ul {
        padding-left: 20px;
        
        li {
          margin-bottom: 5px;
          color: #606266;
        }
      }
    }
  }
}

// 覆盖element-ui样式
::v-deep .el-textarea__inner {
  resize: none;
  border-radius: 20px;
  padding: 10px 15px;
  
  &:focus {
    border-color: #409EFF;
  }
}

::v-deep .model-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  margin-right: 6px;
  color: #fff;
  
  &.deepseek {
    background: linear-gradient(135deg, #3a7bd5, #00d2ff);
  }
  
  &.ppteditor {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
  }
  
  &.kimi {
    background: linear-gradient(135deg, #11998e, #38ef7d);
  }
  
  &.tongyiwx {
    background: linear-gradient(135deg, #834d9b, #d04ed6);
  }
}

::v-deep .el-dropdown-menu {
  padding: 5px 0;
  min-width: 240px;
  
  .el-dropdown-item {
    padding: 8px 12px;
    line-height: 1.5;
    
    &:hover {
      background-color: #f5f7fa;
    }
    
    .model-item {
      .model-item-header {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        
        .model-name {
          font-weight: 500;
          font-size: 14px;
        }
      }
      
      .model-description {
        color: #606266;
        font-size: 12px;
        margin-bottom: 8px;
      }
      
      .model-capabilities {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        
        .el-tag {
          margin-right: 5px;
          font-size: 10px;
          padding: 0 5px;
          height: 20px;
          line-height: 18px;
        }
      }
    }
  }
}

// 历史对话表格样式
.el-table {
  .el-tag {
    &.deepseek {
      background: linear-gradient(135deg, #3a7bd5, #00d2ff);
      color: #fff;
    }
    
    &.ppteditor {
      background: linear-gradient(135deg, #ff7e5f, #feb47b);
      color: #fff;
    }
    
    &.kimi {
      background: linear-gradient(135deg, #11998e, #38ef7d);
      color: #fff;
    }
    
    &.tongyiwx {
      background: linear-gradient(135deg, #834d9b, #d04ed6);
      color: #fff;
    }
  }
}

.file-message {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background-color: #f4f4f5;
  border-radius: 4px;
  
  i {
    margin-right: 5px;
    font-size: 16px;
    color: #909399;
  }
}
</style>